<template>
	<view class="page">
		<view>
			<image src="/static/image/banner.png" style="width: 100%;display: block;" mode="widthFix"></image>
			<view class="p15">

				<view class="module-block brs8 p15">



					<view class="bg-block fz16 bm pb15 mb15">

						<view class="item-addon c0"><span class="xing">*</span>姓名</view>
						<view class="mt10">
							<input v-model="post.name" style="padding: 0;" type="text" placeholder="请填写姓名" />
						</view>
					</view>

					<view class="bg-block fz16 bm pb15 mb15">

						<view class="item-addon c0"><span class="xing">*</span>联系方式</view>
						<view class="mt10">
							<input v-model="post.name" style="padding: 0;" type="text" placeholder="请填写联系方式" />
						</view>
					</view>
					<view class="bg-block fz16 bm pb15 mb15">

						<view class="item-addon c0"><span class="xing">*</span>证书或者礼品的邮寄地址</view>
						<view class="mt10">
							<input v-model="post.name" style="padding: 0;" type="text" placeholder="请填写证书或者礼品的邮寄地址" />
						</view>
					</view>
					<view class="bg-block fz16 bm pb15 mb15"
						@click="pupopList=cateList,pupopType='certificate_category',pupopShow=true">

						<view class="item-addon c0"><span class="xing">*</span>身份选择</view>
						<view class="mt10" style="position: relative;">
							<view class="bg-select"></view>
							<input style="padding: 0;" v-model="post.certificate_category" disabled type="text"
								placeholder="请选择身份选择" />
						</view>
					</view>


					<view class="bg-block fz16 bm pb15 mb15"
						@click="pupopList=cateList,pupopType='certificate_category',pupopShow=true">

						<view class="item-addon c0"><span class="xing">*</span>时间区间</view>
						<view class="mt10" style="position: relative;">
							<view class="bg-select"></view>
							<input style="padding: 0;" v-model="post.certificate_category" disabled type="text"
								placeholder="请选择时间区间" />
						</view>
					</view>

					<view class="bg-block fz16 bm pb15 mb15">

						<view class="item-addon c0"><span class="xing">*</span>是否愿意参加周
							年庆当晚的篝火晚会</view>
						<view class="mt10">

							<u-radio-group v-model="post.sex">
								<u-radio name="是">
									是
								</u-radio>
								<u-radio name="否">
									否
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>

				

				


				


			</view>



			<view class="module-btn p15">
				<view class="btn" @click="toAdd">提交</view>
			</view>
			<u-picker mode="time" v-model="showDate" :params="params" @confirm="dateConfirm"></u-picker>
			<!-- 弹窗选择 -->
			<u-picker mode="selector" range-key="label" @confirm="popupConfirm" v-model="pupopShow"
				:range="pupopList"></u-picker>
			<!-- 弹窗选择 -->


		</view>


	</view>
</template>

<script>
	import areaPicker from "@/components/area-picker/areaPicker.vue";
	export default {
		components: {
			areaPicker
		},
		data() {
			return {
				showTips: false,
				cateList: [{
					label: '身份证'
				}, {
					label: '护照'
				}, {
					label: '港澳通行证'
				}, ],
				isAgree: false,
				activity: {},
				defaultIndex: [0, 0, 0],
				show: false,
				isTop: false,
				allSupplier: [],
				cityList: [],
				workCategoryList: [],
				workGroupList: [],
				nationalityList: [],
				// 基础数据
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showDate: false,
				pupopShow: false,
				pupopType: 'certificate_type',
				pupopList: [],
				modelList: [],
				colorList: [],
				sexList: [],
				post: {
					activity_id: '',
					name: '',
					sex: '',
					areaName: '',
					province: '',
					birthday: '',
					nationality: '',
					city: '',
					certificate_category: '',
					work_category_id: '',
					work_group_id: '',
					identification_photo: '',
					image: ''
				},
			}
		},
		onLoad(e) {


		},
		onShow() {

		},
		methods: {
			// 省市区联动初始化
			showThreePicker() {
				this.show = true
				// this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				console.log(e, 1111)
				this.post.areaName = e[0].name + "-" + e[1].name
				this.post.province = e[0].id
				this.post.city = e[1].id
			},
			chooseImg(type) {
				this.$api.uploadFiles((res) => {
					if (res.code) {
						this.post[type] = res.data.fullurl
					}
				})
			},
			dateConfirm(e) {
				this.post.birthday = `${e.year}-${e.month}-${e.day}`
			},
			popupConfirm(e) {
				let idx = e[0]
				this.post[this.pupopType] = this.pupopList[idx].label
				if (this.pupopType == 'work_category_id' || this.pupopType == 'work_group_id') {

					this.post[this.pupopType] = this.pupopList[idx].id

					this.post[this.pupopType + 'Name'] = this.pupopList[idx].label
				}
			},
			toAdd() {
				if (!this.isAgree) {
					this.$common.errorToShow('请先阅读并同意版权说明！')
					return
				}
				this.$api.activityApply(this.post, res => {
					if (res.code) {
						this.$common.successToShow('提交成功', () => {
							uni.redirectTo({
								url: '/pages/user/car/index'
							})
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		background: #4CA8E7;
		color: #fff;
		font-size: 15px;
		padding: 26rpx;
		width: 100%;
		text-align: center;
		border-radius: 50rpx;
	}

	.module-btn {}

	.line {
		width: 750rpx;
		height: 4rpx;
		position: relative;
		top: -4rpx;
		background: #F6F9F9;
		border-radius: 0px 0px 0px 0px;
	}

	.btn-img {
		border: 1px dashed #ccc;
		border-radius: 10rpx;
		width: 100%;
		height: 160rpx;
		margin: 0 auto;
		display: flex;
		font-size: 30rpx;
		align-items: center;
		justify-content: center;
	}

	.module-block {
		background: #f2f6ff;
	}

	.bg-select {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 5;
	}

	.xing {
		color: red;
		margin-right: 2px;
	}
</style>